<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="head :: commonHead('收藏')">
    <!-- TODO $ { dict } -->
    <!--/* <title cus:dict="user-type, ${contentType}"></title> */-->
</head>

<body>

<div th:replace="head :: header"></div>

<div id="app" class="user_container clearfix">

    <div th:replace="content/personal/left :: body"></div>

    <!-- 右侧内容 -->
    <div class="right_boxwrap">
        <div class="user_right_box">
            <div class="user_right_box_title">
                <div class="user_right_box_title_l">
                    <em></em>
                    <h3 cus:dict="user-type, ${contentType}, 收藏的"></h3>
                </div>
            </div>

            <div class="collection_contentwrap">
                <div class="collection_content">
                    <ul >
                        <li v-for="(item, index) in tableData" :key=item.id>
                            <div class="left">
                                <img :src="item.portrait" alt="">
                            </div>
                            <div class="right">
                                <h3>姓名：{{item.nickname}}</h3>
                                <h4>代表作：{{item.mainAchievements}}</h4>
                                <p>
                                    个人签名：{{item.personalizedSignature}}</p>
                            </div>
                            <a href="javascript:void(0)" th:attr="data-href=@{/personal/collect/api/collect}" :data-id="item.id" @click="cancel(index)" style="right:128px; background: #ffab90;">取消收藏</a>
                            <a :href="'/user/detail/' + item.id">查看详情</a>
                        </li>

                    </ul>
                </div>
            </div>

            <div style="display: flex;justify-content: center;">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageSize"
                        layout="prev, pager, next"
                        :total="total"
                        v-if="tableData != null && tableData.length > 0">
                </el-pagination>
                <div class="collection_content_null_tip" v-else>
                    暂时没有收藏的摄影师、编剧, 快去看一下吧!
                </div>
            </div>

        </div>
    </div>
</div>

<div th:replace="foot :: body"></div>

</body>

<script th:src="${#request.getAttribute('ctx') + '/static/front/js/home.js'}" type="text/javascript" charset="utf-8"></script>

<script th:inline="javascript">
    var data = [[${users}]];
    for(var i in data) {
        data[i].portrait = uploadServer + data[i].portrait;
    }

    new Vue({
        el: '#app',
        data: {
            tableData: data,
            currentPage: [[${page.pageNum}]],
            total: [[${page.total}]],
            pageSize: [[${page.pageSize}]],
            type: [[${collect.type}]],
            operation: [[${collect.operation}]],
            dictionaries: [[${dictionaries}]],
            contentType: [[${contentType}]]
        },

        methods: {
            load: function() {
                var _self = this;
                $.ajax({
                    type: 'get',
                    url: [[${ctx}]] + '/personal/collect/' + _self.type + '/' + _self.operation + '/api/list?pageNum=' + _self.currentPage+ "&pageSize=" + _self.pageSize + '&contentType=' + _self.contentType,
                    beforeSend: function() {
                        _self.loading = true;
                    },
                    dataType: 'json',
                    success: function(result) {
                        if (result.status = Messages.HTTP_STATUS.SUCCESS) {
                            if (result.data.users.length > 0) {
                                for (var i in result.data.users) {
                                    result.data.users[i].portrait = uploadServer + result.data.users[i].portrait;
                                }
                                _self.tableData = result.data.users;
                                _self.currentPage = result.data.page.pageNum;
                                _self.total = result.data.page.total;
                            }
                        }
                    },
                    error: function(e) {
                        ELEMENT.Message.error(Messages.ERROR);
                    }
                })
            },

            handleSizeChange: function(val) {
                this.pageSize = val;
                this.load();
            },

            handleCurrentChange: function(val) {
                this.currentPage = val;
                this.load();
            },

            cancel: function(index) {
                var _self = this;
                var id = _self.tableData[index].id;
                $.ajax({
                    type: 'post',
                    url: '/personal/collect/' + _self.type + '/' + _self.operation + '/api/collect',
                    data: {
                        dataId: id
                    },
                    dataType: 'json',
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                    },
                    success: function (result) {
                        if (result.status == Messages.HTTP_STATUS.SUCCESS) {
                            if (result.data == true) {

                            } else {
                                _self.tableData.splice(index, 1);
                            }
                        } else {
                            ELEMENT.Message.error(result.error);
                        }
                    },
                    error: function (e) {
                        ELEMENT.Message.error(Messages.ERROR);
                    }
                })
            }
        }
    })
</script>

</html>
